import * as THREE from 'three';
// 导入 轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { gsap } from 'gsap';
import * as dat from 'dat.gui'
import sunrise from '../assets/img/sunrise.jpg'
import { Water } from 'three/examples/jsm/objects/Water2.js'


import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import waterpoolGlb from '../assets/module/waterpool.glb'

/**
 *  目标：浴缸效果
 */



// 创建场景
const scene = new THREE.Scene();

// 创建相机 fov（角度）, aspect （宽高比）, near 近裁剪面，far 远裁剪面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(0, 7, 7)
scene.add(camera);

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(sunrise, (it) => {

    it.mapping = THREE.EquirectangularReflectionMapping

    // 创建材质
    const material = new THREE.MeshStandardMaterial({
        envMap: texture,
        metalness: .7,
        roughness: 0.1
    });


    // 添加环境光
    scene.add(new THREE.AmbientLight(0xffffff, 0.5));

    // 添加方向光
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.1);
    directionalLight.position.set(10, 10, 10);
    scene.add(directionalLight);


    // 给场景添加背景
    scene.background = it;
    scene.texture = it;

}, undefined, (err) => {
    console.error('An error occurred loading the texture:', err);
})


// const water = new Water(new THREE.PlaneGeometry(2, 2, 1024, 1024),
//     {
//         color: '#ffffff',
//         scale: 1,
//         flowDirection: new THREE.Vector2(1, 1),
//         textureHeight: 1024,
//         textureWidth: 1024
//     }
// )
// water.rotation.x = -Math.PI / 2
// scene.add(water)

// 导入模型
const loader = new GLTFLoader();
loader.load(waterpoolGlb, (gltf) => {
    const model = gltf.scene;
    const poolMesh = model.children[0]
    poolMesh.material.side = THREE.DoubleSide
    poolMesh.material.color = new THREE.Color("#ffffff")
    const waterMesh = model.children[1]
    const water = new Water(waterMesh.geometry,
    {
        color: '#ffffff',
        scale: 1,
        flowDirection: new THREE.Vector2(1, 1),
        textureHeight: 1024,
        textureWidth: 1024
    }
)

    scene.add(poolMesh)
    scene.add(water);
    
})



// const plane = new THREE.Mesh(
//     new THREE.PlaneGeometry(2, 2, 512, 512),
//     new THREE.MeshBasicMaterial({ color: '#ffff00' })

// )
// plane.position.x = 0
// plane.position.y = -1
// plane.position.z = 0

// plane.rotation.x = -Math.PI / 2
// scene.add(plane)



// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 添加直线光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);


// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);


// 将 webgl 渲染的 canvas 添加到 body 中
document.body.appendChild(renderer.domElement);

// 设置相机 和 场景 通过渲染器渲染
// renderer.render(scene,camera)

// 创建轨道控制器 (相机,用于渲染的dom)
const controls = new OrbitControls(camera, renderer.domElement);

renderer.shadowMap.enabled = true;


// 开启阻尼
controls.enableDamping = true;

// 添加坐标辅助器
const axesHelper = new THREE.AxesHelper(3);
scene.add(axesHelper);

// 设置 clock
const clock = new THREE.Clock();


/**
 * 渲染函数
 * L = V*T   距离 = 速度 * 时间
 */
function render() {
    controls.update()
    renderer.render(scene, camera)
    // 浏览器自带的 请求动画帧的方法 ，这里设置 没一帧都调用一下 render 函数
    requestAnimationFrame(render)
}
render();

// 监听窗口大小变化
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    // 重新设置相机的宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 重新设置相机的裁剪面(投影矩阵)
    camera.updateProjectionMatrix();

    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio);
}
